<template>
    <div id="app">
        <Layout>
            <router-view />
        </Layout>
    </div>
</template>

<script>
import Layout from "@/layouts"; //最外层布局（类似Header、Footer等常驻页面的UI都放在这里）
export default {
    name: "App",
    components: {
        Layout,
    },
};
</script>

<style lang="scss">
// 重置浏览器样式
@import "./style/normalize.scss";
@import "./style/reset.scss";
// 公用css、scss变量
@import "./style/common.scss";
// iconfont图标库（只做引入示例，项目不需要可以去掉）
@import "~@/assets/iconfont/iconfont.css";
//css 变量
#app {
    font-size: $font-size-base;
    color: var(--color-text-1);
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    min-height: 100vh;
    // background: var(--color-bg-1);
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.28s;
    }
    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }

    /* fade-transform */
    .fade-transform-leave-active,
    .fade-transform-enter-active {
        transition: all 0.5s;
    }

    .fade-transform-enter {
        opacity: 0;
        transform: translateX(-30px);
    }

    .fade-transform-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }

    /* breadcrumb transition */
    .breadcrumb-enter-active,
    .breadcrumb-leave-active {
        transition: all 1s;
    }

    .breadcrumb-enter,
    .breadcrumb-leave-active {
        opacity: 0;
        transform: translateX(20px);
    }

    .breadcrumb-move {
        transition: all 1s;
    }

    .breadcrumb-leave-active {
        position: absolute;
    }
}
</style>
